import React, { useState, useEffect } from "react"
import './App.css'
import OrderTabs from './components/OrderTabs';
import { useNavigate } from "react-router-dom";
import { Button, Dialog, Space, Toast, Divider } from 'antd-mobile'
import './OrderPage.css';
import axios from 'axios'

function App() {

    const [list, setList] = useState([])
    const getList = async () => {
        await axios.post('http://localhost:3010/roomDingList')
            .then(res => {
                if (res.data.code == 200) {
                    setList(res.data.list)
                }
            })
    }

    useEffect(() => {
        getList()
    }, [])

    // 格式化日期为 YYYY/M/D
    const formatDate = (dateString) => {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份从0开始
        const day = date.getDate();
        return `${year}/${month}/${day}`;
    };

    const navigate = useNavigate()
    const goMy = () => {
        navigate('/My')
    }

    //再次预定
    const againroom = async (_id) => {
        await axios.post(`http://localhost:3010/updateRoom`, { _id: _id, status: '待支付' })
            .then(res => {
                if (res.data.code == 200) {
                    getList()
                }
            })
    }
    return (
        <>
            <div className="order-page">
                <OrderTabs />
                <div className="order-content">
                    {
                        list.map((item) => {
                            if (item.status == '已退房') {
                                return (
                                    <div className="order-item" key={item._id}>
                                        <div className="hotel-info">
                                            <h3>{item.hname}</h3>
                                            <p className="room-type">{item.room}</p>
                                            <p className="time">入住时间：{formatDate(item.start)}</p>
                                            <p className="time">退房时间：{formatDate(item.end)}</p>
                                            <p className="status out">已退房</p>
                                            <div className="action-row">
                                                <button className="fapiao-btn">开具发票</button>
                                                <Button
                                                    className="again-btn"
                                                    onClick={async () => {
                                                        const result = await Dialog.confirm({
                                                            content: '是否再次预定',
                                                        })
                                                        if (result) {
                                                            await againroom(item._id)
                                                            Toast.show({ content: '点击了确认', position: 'bottom' })
                                                        } else {
                                                            Toast.show({ content: '点击了取消', position: 'bottom' })
                                                        }
                                                    }}

                                                >
                                                    再次预定
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                )
                            }
                        })
                    }
                     <p style={{textAlign:'center',fontSize:'0.3rem',marginTop:'0.5rem',color:'gray'}}>没有更多订单了 ~</p>
                </div>
            </div>
        </>
    )
}

export default App